<template>
    <view class="receive">
        <view class="receives">
            <!-- 商品详情 -->
            <view class="receive_info" @click="good_detail">
                <image
                    class="detail_img"
                    :src="couponNumList.goodsSnapshot.thumbnail"
                    mode=""
                ></image>
                <view>
                    <text class="detail_t">{{ couponNumList.goodsName }}</text>
                    <view class="detail_tt">
                        <text
                            v-if="
                                couponNumList.goodsSnapshot.simpleSpecs != null
                            "
                            >{{
                                couponNumList.goodsSnapshot.skuSimpleSpecs ||
                                "--"
                            }}</text
                        >
                        <text
                            v-if="
                                couponNumList.goodsSnapshot.simpleSpecs == null
                            "
                            >--</text
                        >
                    </view>
                    <u-icon
                        name="arrow-right"
                        color="#333"
                        size="14"
                        top="5px"
                        labelPos="left"
                    ></u-icon>
                </view>
            </view>
            <!-- 信息详情 -->
            <view class="list flex_wrap flex_column">
                <u-gap
                    height="32rpx"
                    v-if="
                        couponNumList.reportingPeriod != '' &&
                        couponNumList.reportingPeriod != null
                    "
                ></u-gap>
                <u-row
                    v-if="
                        couponNumList.reportingPeriod != '' &&
                        couponNumList.reportingPeriod != null
                    "
                >
                    <u-col span="3"
                        ><u--text
                            text="报告周期"
                            color="#333"
                            size="26rpx"
                            selectable
                            bold
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="couponNumList.reportingPeriod + '个工作日'"
                            color="#333"
                            size="26rpx"
                    /></u-col>
                </u-row>
                <u-gap
                    height="24rpx"
                    v-if="
                        couponNumList.returnAddress != '' &&
                        couponNumList.returnAddress != null
                    "
                ></u-gap>
                <u-row
                    justify="space-between"
                    align="top"
                    v-if="
                        couponNumList.returnAddress != '' &&
                        couponNumList.returnAddress != null
                    "
                >
                    <u-col span="3"
                        ><u--text
                            text="回寄地址"
                            color="#333"
                            size="26rpx"
                            bold
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="couponNumList.returnAddress || '--'"
                            color="#333"
                            size="26rpx"
                    /></u-col>
                    <u-col span="1" @click="cope()">
                        <u--text text="复制" size="26rpx" bold color="#588BF3"
                    /></u-col>
                </u-row>
                <u-gap
                    height="24rpx"
                    v-if="
                        couponNumList.returnReceiver != '' &&
                        couponNumList.returnReceiver != null
                    "
                />
                <u-row
                    v-if="
                        couponNumList.returnReceiver != '' &&
                        couponNumList.returnReceiver != null
                    "
                >
                    <u-col span="3"
                        ><u--text text="收件人" color="#333" size="26rpx" bold
                    /></u-col>
                    <!-- <u-col span="8"><u--text :text="(couponNumList.returnReceiver + couponNumList.returnReceiverPhone) || '--'" color="#333" size="24rpx" /></u-col> -->
                    <u-col span="8">
                        <text
                            style="
                                color: #333;
                                font-size: 26rpx;
                                margin-right: 8rpx;
                            "
                            >{{ couponNumList.returnReceiver }}</text
                        >
                        <text style="color: #333; font-size: 24rpx">{{
                            couponNumList.returnReceiverPhone
                        }}</text>
                    </u-col>
                </u-row>
                <u-gap height="24rpx" />
                <u-row justify="space-between" align="top">
                    <u-col span="3"
                        ><u--text
                            text="客服热线"
                            color="#333"
                            size="26rpx"
                            bold
                    /></u-col>
                    <u-col span="4"
                        ><u--text
                            :text="phone || '--'"
                            color="#333"
                            size="26rpx"
                    /></u-col>
                    <u-col span="5">
                        <view style="display: flex" @click="to_call">
                            <u-icon
                                size="18"
                                name="phone"
                                color="#588BF3"
                            ></u-icon
                            ><u--text
                                margin="0 4rpx"
                                text="拨打"
                                size="24rpx"
                                color="#588BF3"
                                bold
                            ></u--text>
                        </view>
                    </u-col>
                </u-row>
                <u-gap height="20rpx" />
            </view>
        </view>
        <u-gap height="7" bgColor="#F5F5F5 " marginTop="10" />
        <view class="receives">
            <view class="enterprise_top">
                <text class="enterprise_bg"></text>
                <u-text text="领取信息" size="32rpx" bold />
            </view>
            <u-gap height="10rpx" />
            <!-- 信息详情 -->
            <u-form
                ref="receiveForm"
                :model="receiveForm"
                :labelStyle="labelStyle"
            >
                <u-form-item labelWidth="70" label="提货方式">
                    <view class="butionType">
                        <u-icon
                            v-if="couponNumList.giftDistributionType == 0"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/983ca83b4d1b4ee6a80057c6332bc128.png"
                            label="快递发货"
                            label-color="#588BF3"
                            size="15"
                            label-size="36rpx"
                            label-pos="left"
                        />
                        <u-icon
                            v-if="couponNumList.giftDistributionType == 1"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/983ca83b4d1b4ee6a80057c6332bc128.png"
                            label="现场提货"
                            label-color="#588BF3"
                            size="15"
                            label-size="36rpx"
                            label-pos="left"
                        />
                    </view>
                </u-form-item>
                <u-form-item labelWidth="70" label="订单号">
                    <u--text :text="orderNum" size="26rpx"></u--text>
                </u-form-item>
                <u-form-item labelWidth="70" label="姓名" prop="name">
                    <view class="formInput">
                        <u-input
                            placeholder="请输入名字"
                            v-model="receiveForm.name"
                            clearable
                            border="none"
                            fontSize="26rpx"
                            color="#333"
                            customStyle="background:#F3F3F3;border-radius: 6px"
                        ></u-input>
                    </view>
                </u-form-item>
                <u-form-item label="手机号" labelWidth="70" prop="mobile">
                    <view style="display: flex">
                        <view class="formInput_t">
                            <u-input
                                placeholder="请输入手机号"
                                border="none"
                                fontSize="26rpx"
                                color="#333"
                                v-model="receiveForm.mobile"
                                clearable
                            ></u-input>
                        </view>
                        <!-- <u-button color='#588BF3 ' customStyle='width:144rpx;height:64rpx;font-size:24rpx' :text="codeTxt" @click="getValidCode"></u-button> -->
                        <button
                            :class="
                                codeTxt == '获取验证码' ? 'btn' : 'activebtn'
                            "
                            @click="getValidCode"
                        >
                            {{ codeTxt }}
                        </button>
                    </view>
                </u-form-item>
                <u-form-item label="验证码" labelWidth="70" prop="checkCode">
                    <view class="formInput">
                        <u-input
                            placeholder="请输入验证码"
                            border="none"
                            fontSize="26rpx"
                            color="#333"
                            v-model="receiveForm.checkCode"
                            clearable
                        />
                    </view>
                </u-form-item>
                <u-form-item label="领取数量" labelWidth="70" prop="receiveNum">
                    <u-number-box
                        v-model="receiveForm.receiveNum"
                        @change="valChange"
                        input-width="100"
                        :min="1"
                        :max="couponNumList.restrictClaim"
                    ></u-number-box>
                    <!-- <u-number-box
					    @change="onChange"
					    integer
					    v-model="currentOrderDetailData.restrictClaim"
					    :min="1"
					    :max="currentOrderDetailData.goodsCount"
					    button-size="22"
					></u-number-box> -->
                </u-form-item>
            </u-form>
            <!-- <u-button  color="#588BF3" customStyle='border-radius:20px;margin-top:68px;font-size:34rpx;' text="领取"></u-button> -->
            <view class="lq_btn" @click="to_success('receiveForm')">
                领取
            </view>
        </view>
        <getphonenumber />
        <profile
            :signData="hotState.data"
            :signUpId="signUpId"
            @startSignIn="startSignIn"
        />
        <u-notify message="成功" ref="uNotify" show></u-notify>
    </view>
</template>

<script>
import { useRequest } from "@/js_sdk/tla-useRequest/useRequest.js";
import {
    sendMsm,
    receive,
    getCouponNumDetail,
    getphone,
    couponIsHave,
    checkCouponNum,
} from "@/api/receive";
import { getCustomerInfoByToken } from "@/api/login.js";
import getphonenumber from "@/components/getphonenumber/getphonenumber.vue";
import profile from "./getaunt.vue";
import { mapGetters } from "vuex";
import { numMulti } from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { updateCustomerByCustomerId } from "@/api/login.js";
export default {
    data() {
        return {
            testingAddress: "",
            testingRegion: "",
            phone: "",
            configKeys: "CUSTOMER_SERVICE_HOTLINE",
            couponNumList: {},
			goodsType:'',
            orderNum: "",
            shop: 1,
            labelStyle: {
                fontSize: "26rpx",
                color: "#333",
                fontWeight: "bold",
            },
            receiveForm: {
                mobile: "",
                checkCode: "",
                name: "",
                receiveNum: "1",
            },
            receiveSuccessList: {},
            codeTxt: "获取验证码",
            receiveFormRules: {
                name: [
                    {
                        type: "string",
                        required: true,
                        message: "请填写姓名",
                        trigger: ["blur", "change"],
                    },
                ],
                checkCode: {
                    type: "string",
                    required: true,
                    len: 6,
                    message: "请填写6位验证码",
                    trigger: ["blur"],
                },
                receiveNum: {
                    type: "number",
                    required: true,
                    message: "请输入领取数量",
                    trigger: ["blur"],
                },
                mobile: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: ["change", "blur"],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: "手机号码不正确",
                        trigger: ["change", "blur"],
                    },
                ],
            },
        };
    },
    computed: {
        ...mapGetters(["userInfo", "isLogin"]),
    },
    components: {
        profile,
        getphonenumber,
    },
    onReady() {
        this.$refs.receiveForm.setRules(this.receiveFormRules);
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    onLoad(options) {
        let orderNum = options.scene;
        this.orderNum = orderNum;

        // 解决微信扫码登录 新用户登录跳回 该页面
        var pages = getCurrentPages(); // 获取栈实例
        if (pages.length === 1) {
            let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
            let currentPage = pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
            uni.setStorageSync("loginBackUrl", currentPage);
        }
        uni.$u.sleep(400).then(() => {
            this.getCouponNum(orderNum);
            this.getPhone();
            this.wxPhone();
            this.checkCouponIsHaveSignIn(orderNum);
        });
    },
    methods: {
        async valChange(e) {
            const result = await checkCouponNum(this.orderNum, e.value);
            this.couponNumList.restrictClaim = result.data;
        },
        getPhone() {
            getphone(this.configKeys).then((res) => {
                this.phone = res.data.customerServicePhone;
            });
        },
        wxPhone() {
            getCustomerInfoByToken().then((res) => {
                this.receiveForm.mobile = res.data.mobile;
            });
        },
        tips(meesage, type, colorbg) {
            this.$refs.uNotify.show({
                top: 0,
                type: type,
                color: "#FFF",
                // bgColor: '#588bf3',
                message: meesage,
                duration: 2000,
                fontSize: "28rpx",
                safeAreaInsetTop: false,
            });
        },
        good_detail() {
            if (
                this.couponNumList.goodsSnapshot.topImage == "" ||
                this.couponNumList.goodsSnapshot.topImage == null
            ) {
                uni.$u.toast("暂无详情图片！");
                return;
            } else {
                uni.navigateTo({
                    url:
                        "/pages_receive/goods_detail/index?detailImage=" +
                        this.couponNumList.goodsSnapshot.topImage,
                });
            }
        },
        to_call() {
            if (this.phone == "" || this.phone == null) {
                uni.$u.toast("暂无客服热线号码，不支持拨打电话！");
                return;
            } else {
                this.contact();
            }
        },
        contact() {
            uni.makePhoneCall({
                // 手机号
                phoneNumber: this.phone,
                // 成功回调
                success: (res) => {},
                // 失败回调
                fail: (res) => {},
            });
        },
        cope() {
            if (
                (this.couponNumList.returnReceiverPhone == "" &&
                    this.couponNumList.returnReceiver == "") ||
                (this.couponNumList.returnReceiverPhone == null &&
                    this.couponNumList.returnReceiver == null)
            ) {
                let data = this.couponNumList.returnAddress;
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            } else if (
                this.couponNumList.returnReceiver == "" ||
                this.couponNumList.returnReceiver == null
            ) {
                let data =
                    this.couponNumList.returnAddress +
                    "," +
                    this.couponNumList.returnReceiverPhone;
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            } else if (
                this.couponNumList.returnReceiverPhone == "" ||
                this.couponNumList.returnReceiverPhone == null
            ) {
                let data =
                    this.couponNumList.returnAddress +
                    "," +
                    this.couponNumList.returnReceiver; //获取到你要复制的字符串
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            } else {
                let data =
                    this.couponNumList.returnAddress +
                    "," +
                    this.couponNumList.returnReceiver +
                    "," +
                    this.couponNumList.returnReceiverPhone; //获取到你要复制的字符串
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            }
        },
        getCouponNum(orderNum) {
            getCouponNumDetail(orderNum).then((res) => {
                this.couponNumList = res.data;
				this.orderPlatform = res.data.orderPlatform
				console.log(this.orderPlatform,'this.orderPlatform>>')
                const goodsSnapshot =
                    this.couponNumList.goodsSnapshot &&
                    JSON.parse(this.couponNumList.goodsSnapshot);
                this.goodsType = goodsSnapshot.handleFlag || null;
                console.log(
                    goodsSnapshot,
                    "this.goodsSnapshot>>>>>>",
                    this.goodsType,
                    "this.goodsType>>>"
                );
                const skuSpecs =
                    (goodsSnapshot.skuSpecs &&
                        JSON.parse(goodsSnapshot.skuSpecs)) ||
                    null;
                this.couponNumList.goodsSnapshot = goodsSnapshot;
                this.couponNumList.goodsSnapshot.skuSpecs = skuSpecs || null;
                console.log(
                    this.couponNumList,
                    this.couponNumList.goodsSnapshot.skuSpecs,
                    "item.goodsSnapshot.skuSpecs"
                );
                return this.couponNumList;
            });
        },
        checkCouponIsHaveSignIn(orderNum) {
            couponIsHave(orderNum).then((res) => {
                if (!res.data) {
                    // uni.$u.toast('提交成功');
                    uni.$u.route({
                        url: "pages_receive/back_success/other",
                        params: {
                            delivery: "2",
                        },
                    });
                }
            });
        },
        getValidCode() {
            //点击获取验证码
            let msg;
            if (this.receiveForm.mobile == "") {
                msg = "请输入手机号";
            } else if (!/^1[3456789][0-9]{9}$/.test(this.receiveForm.mobile)) {
                msg = "手机号有误，请检查";
            } else {
                if (this.codeFlag == false) {
                    return;
                }
                this.codeFlag = false;
                var time = 30;
                this.codeTxt = time + "s";
                var timer = setInterval(() => {
                    this.codeTxt = "获取验证码";
                    if (time == 1) {
                        this.codeFlag = true;
                        clearInterval(timer);
                    } else {
                        time--;
                        this.codeTxt = time + "s";
                    }
                }, 1000);
                //发送验证码
                this.getPhoneSendMsm();
            }
            uni.showToast({
                icon: "none",
                title: msg,
            });
        },
        async getPhoneSendMsm() {
            //发送验证码
            const res = await sendMsm(this.receiveForm.mobile);
        },
        to_success() {
            //点击领取
            const that = this;
            this.$refs.receiveForm
                .validate()
                .then((res) => {
                    if (!this.userInfo.nickName) {
                        //点击领取如果没有用户名字 直接同步到用户名称
                        const paramsUserInfo = {
                            nickName: this.receiveForm.name,
                            id: this.userInfo.id,
                        };
                        updateCustomerByCustomerId(paramsUserInfo).then(
                            (res) => {}
                        );
                    }
                    const params = {
                        mobile: this.receiveForm.mobile,
                        orderNum: this.orderNum, //订单号1.0.4
                        checkCode: this.receiveForm.checkCode,
                        name: this.receiveForm.name,
                        receiveNum: this.receiveForm.receiveNum,
                    };

                    receive(params)
                        .then(async (res) => {
                            // 0:快递发货1:现场提货
                            if (that.couponNumList.giftDistributionType == 0 && that.orderPlatform == '1') {
                                if (that.goodsType == "CHICKEN_FLAG") {
                                    uni.$u.sleep(500).then(() => {
                                        uni.$u.route({
                                            type: "redirectTo",
                                            url: "pages_shop1/pay/chickenDetail/share",
                                            params: {
                                                orderNum: that.orderNum,
                                                productCount: "1",
                                                goodsType: that.goodsType,
                                            },
                                        });
                                    });
                                } else if (that.goodsType == "FEED_FLAG" && that.orderPlatform == '1') {
                                    (this.productCount = numMulti(
                                        that.couponNumList.goodsSnapshot
                                            .skuSimpleSpecs,
                                        that.receiveForm.receiveNum
                                    )),
                                        uni.$u.sleep(500).then(() => {
                                            uni.$u.route({
                                                type: "redirectTo",
                                                url: "pages_shop1/pay/chickenDetail/share",
                                                params: {
                                                    orderNum: that.orderNum,
                                                    productCount:
                                                        that.productCount ||
                                                        "1",
                                                    goodsType: that.goodsType,
                                                },
                                            });
                                        });
                                } else {
                                    uni.$u.route({
                                        url: "/pages_receive/receive_receipt/index",
                                        //商品类  收货人
                                        params: {
                                            name: res.data.name,
                                            mobile: res.data.mobile,
                                            id: res.data.id,
                                            couponNum: res.data.couponNum,
                                        },
                                    });
                                }
                            } else {
                                if (that.goodsType == "CHICKEN_FLAG") {
                                    uni.$u.sleep(500).then(() => {
                                        uni.$u.route({
                                            type: "redirectTo",
                                            url: "pages_shop1/pay/chickenDetail/share",
                                            params: {
                                                orderNum: that.orderNum,
                                                productCount: "1",
                                                goodsType: that.goodsType,
                                            },
                                        });
                                    });
                                } else if (that.goodsType == "FEED_FLAG") {
                                    (this.productCount = numMulti(
                                        that.couponNumList.goodsSnapshot
                                            .skuSimpleSpecs,
                                        that.receiveForm.receiveNum
                                    )),
                                        uni.$u.sleep(500).then(() => {
                                            uni.$u.route({
                                                type: "redirectTo",
                                                url: "pages_shop1/pay/chickenDetail/share",
                                                params: {
                                                    orderNum: that.orderNum,
                                                    productCount:
                                                        that.productCount ||
                                                        "1",
                                                    goodsType: that.goodsType,
                                                },
                                            });
                                        });
                                } else {
                                    uni.$u.route({
                                        url: "pages_receive/back_success/other",
                                        params: {
                                            delivery: 1,
                                        },
                                    });
                                }
                            }
                        })
                        .catch((error) => {
                            uni.$u.toast(msg);
                        });
                })
                .catch((errors) => {});
        },
    },
};
</script>

<style lang="scss">
.receive {
    background: #ffffff;
    width: 100%;
    height: 100vh;
    color: #333333;
}

.receives {
    padding: 36rpx 28rpx 0;
}

.formInput,
.formInput_t {
    width: 498rpx;
    height: 66rpx;
    background: #f3f3f3;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
}

.formInput_t {
    width: 350rpx;
}

.receive_info {
    box-shadow: 0px 0px 16rpx 2rpx rgba(0, 0, 0, 0.12);
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0;
    display: flex;
    align-items: center;
}

.detail_img {
    width: 166rpx;
    height: 166rpx;
    border-radius: 8rpx;
    margin: 0 20rpx 0 16rpx;
}

.detail_t {
    display: block;
    width: 484rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail_tt {
    margin-top: 18rpx;
    font-size: 26rpx;
    color: #666666;

    text {
        margin-right: 10rpx;
    }
}

.list {
}

.enterprise_top {
    display: flex;
    height: 44rpx;
    align-items: center;
}

.butionType {
    display: flex;
}

.enterprise_bg {
    display: block;
    width: 8rpx;
    height: 28rpx;
    background: #588bf3;
    margin-right: 12rpx;
}

.btn {
    width: 144rpx;
    height: 66rpx;
    line-height: 66rpx;
    background: #588bf3;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #fff;
    padding: 0;
}

.activebtn {
    width: 144rpx;
    height: 66rpx;
    background: #aaa;
    border-radius: 8rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    color: #fff;
    padding: 0;
}

.lq_btn {
    width: 100%;
    height: 74rpx;
    border-radius: 37rpx;
    line-height: 74rpx;
    color: #fff;
    background-color: #588bf3;
    text-align: center;
    font-size: 28rpx;
    margin-top: 136rpx;
}
</style>
